import { useState } from 'react';
import { Button } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import ShowModal from './components/modal';
const valueEnum = {
    0: 'close',
    1: 'running',
    2: 'online',
    3: 'error',
};

export type TableListItem = {
    key: number;
    name: string;
    containers: number;
    creator: string;
    status: string;
    createdAt: number;
    memo: string;
};
const tableListDataSource: TableListItem[] = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
        key: i,
        name: 'AppName',
        containers: Math.floor(Math.random() * 20),
        creator: creators[Math.floor(Math.random() * creators.length)],
        status: valueEnum[Math.floor(Math.random() * 10) % 4],
        createdAt: Date.now() - Math.floor(Math.random() * 100000),
        memo: i % 2 === 1 ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴' : '简短备注文案',
    });
}

const columns: ProColumns<TableListItem>[] = [
    {
        title: '流程编号',
        width: 80,
        dataIndex: 'name',
        render: (_) => <a>{_}</a>,
    },
    {
        title: '流程名称',
        dataIndex: 'containers',
        width: 100,
    },
    {
        title: '流程类别',
        width: 80,
        dataIndex: 'status',
        valueEnum: {
            all: { text: '全部' },
            付小小: { text: '付小小' },
            曲丽丽: { text: '曲丽丽' },
            林东东: { text: '林东东' },
            陈帅帅: { text: '陈帅帅' },
            兼某某: { text: '兼某某' },
        },

    },
    {
        title: '流程状态',
        width: 80,
        dataIndex: 'creator',

    },
    {
        title: '权限类型',
        width: 140,
        dataIndex: 'createdAt',
        search: false,
    },
    {
        title: '表单名称',
        width: 140,
        dataIndex: 'createdAt',
        search: false,
    },
    {
        title: '流程定义ID',
        width: 140,
        dataIndex: 'createdAt',
        search: false,
    },
    {
        title: '流程Key',
        width: 140,
        dataIndex: 'createdAt',
        search: false,
    },
    {
        title: '部署ID',
        width: 140,
        dataIndex: 'createdAt',
        search: false,
    },
    {
        title: '操作',
        width: 300,
        key: 'option',
        valueType: 'option',
        render: () => [
            <a key="link">编辑</a>,
            <a key="link">停用</a>,
            <a key="link">启用</a>,
            <a key="link">启用最新</a>,
            <a key="link">预览</a>,
            <a key="link">删除</a>,
        ],
    },
];

export default () => {
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
    const [title, setTitle] = useState<string>('新增')
    const [rowData, setRowData] = useState<any>({});

    const handleCreate = () => {
        setIsModalVisible(true);
        setTitle("add")
    }
    return (
        <PageContainer>
 
            <ProTable<TableListItem>
                columns={columns}
                request={(params, sorter, filter) => {
                    return Promise.resolve({
                        data: tableListDataSource,
                        success: true,
                    });
                }}
                rowKey="key"
                dateFormatter="string"
                headerTitle="流程管理"
                toolBarRender={() => [
                    <Button type="primary" key="primary" onClick={() => handleCreate()}>
                        新增
                    </Button>,
                ]}
            />
            <ShowModal isModalVisible={isModalVisible} title={title} onCancel={() => setIsModalVisible(false)} rowData={rowData} />
        </PageContainer>
    );
};